<template>
  <div class="BigBox">
      <div class="optionContent">
            <div>
                <p>唱片收藏架表达音乐品味</p>
                <p>布置唱片架<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
            <div>
                <p>展示动态图片让别人了解你</p>
                <p>使用相册<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
            <div>
                <p>大声说出你的愿望</p>
                <p>愿望清单<span class="iconfont icon-xiangyoujiantou arright"></span></p>
            </div>
        </div>
        <div class="info">
            <div class="infotitle">
                <h3>基本信息</h3>
                <span>领取村民证</span>
            </div>
            <div class="infoContent">
                <p>村龄: <span>{{age}}年(2017年08月注册)</span></p>
                <p>性别: <span>男</span></p>
                <p>地区: <span>广西 百色</span></p>
            </div>
        </div>
        <!-- 音乐品味 -->
        <div class="taste">
            <div class="tasteTitle">
                <h3>音乐品味</h3>
            </div>
            <!-- <div class="tasteRank" @click="getID(creatPlaylist[0].id)"> -->
                <!-- <router-link class="tasteRank" :to="'/rank/ranklist?id='+creatPlaylist[0].id" tag="div"> -->
                <router-link tag="div" class="tasteRank" to="/rank/mysonglists">
                    <div class="tasteImg">
                        <img :src="creatPlaylist[0].coverImgUrl" alt="">
                    </div>
                    <div class="tasteContent">
                        <h4>听歌排行</h4>
                        <p>累计听歌{{listenSongs}}首</p>
                    </div>
                </router-link>
                <!-- </router-link> -->
            <!-- </div> -->
            <!-- <div class="tasteRank" @click="getID(myLikelist[0].id)"> -->
                <router-link class="tasteRank" :to="'/rank/ranklist?id='+myLikelist[0].id" tag="div">
                    <div class="tasteImg">
                        <img :src="myLikelist[0].coverImgUrl" alt="">
                    </div>
                    <div class="tasteContent">
                        <h4>我喜欢的音乐</h4>
                        <p>{{myLikelist[0].trackCount}}首，播放{{myLikelist[0].playCount}}次</p>
                    </div>
                </router-link>
            <!-- </div> -->
        </div>
        <!-- 创建的歌单 -->
        <div class="foundList">
            <div class="foundTitle">
                <h3>创建的歌单 <span>({{creatPlaylist.length}}个)</span></h3>
            </div>
            <router-link class="foundContent" :to="'/rank/ranklist?id='+creatPlaylist[0].id" tag="div">
                <!-- <div class="foundContent" @click="getID(creatPlaylist[0].id)"> -->
                    <div class="foundImg">
                        <img :src="creatPlaylist[0].coverImgUrl" alt="">
                    </div>
                    <div class="foundText">
                        <h4>{{creatPlaylist[0].name}}</h4>
                        <p>{{creatPlaylist[0].trackCount}}首,播放{{creatPlaylist[0].playCount}}次</p>
                    </div>
                <!-- </div> -->
            </router-link>
        </div>
        <!-- 收藏歌单 -->
        <div class="collectList">
            <div class="collectListTitle">
                <h3>收藏的歌单 <span>({{subPlaylistCount}}个)</span></h3>
            </div>
            <router-link class="collectContent" v-for="item in collectPlaylist" :key="item.id" :to="'/rank/ranklist?id='+item.id" tag="div">
                <!-- <div class="collectContent" v-for="item in collectPlaylist" :key="item.id" @click="getID(item.id)"> -->
                    <div class="ceImg">
                        <img :src="item.coverImgUrl" alt="">
                    </div>
                    <div class="ceText">
                        <h4>{{item.name}}</h4>
                        <p>{{item.trackCount}}首,By 樱栾阡陌，播放{{item.playCount | playCount}}次</p>
                    </div>
                <!-- </div> -->
            </router-link>
            <!-- <div class="ceFooter">
                <span>查看全部</span><span class="iconfont icon-xiangyoujiantou arright"></span>
            </div> -->
        </div>
  </div>
</template>

<script>
import {getPlaylistTrackAll} from "../api/my"
export default {
    props:['listenSongs','createDays','subPlaylistCount','myLikelist','creatPlaylist','collectPlaylist'],
    methods:{
        // 获取歌单ID
        getID(id){
            console.log(id)
            this.$router.push({name:'songlists',parmas:{id:id}})
        },
        // 获取歌单全部歌曲
        getPlaylistTrackAllFun(){
            getPlaylistTrackAll({id:this.id}).then(data=>{
                console.log(data)
            })
        },
        
    },
    computed:{
        age(){
            let age = parseInt(this.createDays/365);
            return age;
        }
    },
    filters:{
        playCount(data){
            let m = data > 100000000? parseInt(data/10000000)/10 + '亿' : data > 10000? parseInt(data/1000)/10 + '万' : data;
            return m;
        }
    }
}
</script>

<style lang="less">
.BigBox{
    padding-bottom: 50px;
    .optionContent{
        display: flex;
        justify-content: space-between;
        text-align: left;
        margin-bottom: 10px;
        div{
            width: 26%;
            background-color: #fff;
            padding: 15px 10px;
            border-radius: 10px;
            font-size: 14px;
            color: #686868;
            p:nth-child(1){
                padding-bottom: 60px;
                line-height: 24px;
            }
            p:nth-child(2){
                color: #f14e4f;
                .arright{
                    font-size: 12px;
                    margin-left: 5px;
                }
            }
        }
    }
    .info{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        line-height: 30px;
        margin-bottom: 10px;
        .infotitle{
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 20px;
            padding:11px 15px;
            padding-bottom: 0px;
            h3{
                font-weight: 700;
            }
            span{
                border: 1px solid #999;
                border-radius: 20px;
                padding: 2px 6px;
                font-size: 12px;
            }
        }
        .infoContent{
            color: #979797;
            border-bottom: 1px solid #ddd;
            padding:11px 15px;
            p{
                span{
                    color: #5f5f5f;
                }
            }
        }
        .infoFooter{
            text-align: center;
            padding: 2px 0px;
            color: #a7a7a7;
            .arright{
                font-size: 12px;
                margin-left: 5px;
            }
        }
    }
    .taste{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        .tasteTitle{
            h3{
                font-weight: 700;
                padding: 10px;
            }
        }
        .tasteRank{
            display: flex;
            padding: 10px;
            align-items: center;
            .tasteImg{
                width: 50px;
                height: 50px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .tasteContent{
                line-height: 20px;
                h4{
                    font-size: 16px;
                    font-weight: 700;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                }
            }
        }
    }
    .foundList{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 10px;
        .foundTitle{
            h3{
                font-weight: 700;
                padding: 10px;
                span{
                    font-size: 12px;
                    color: #aaaaaa;
                }
            }
        }
        .foundContent{
            display: flex;
            padding: 10px;
            align-items: center;
            .foundImg{
                width: 50px;
                height: 50px;
                background-color: aqua;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .foundText{
                line-height: 20px;
                h4{
                    font-size: 16px;
                    font-weight: 700;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                }
            }
        }
    }
    .collectList{
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        .collectListTitle{
            h3{
                font-weight: 700;
                padding: 10px;
                span{
                    font-size: 12px;
                    color: #aaaaaa;
                }
            }
        }
        .collectContent{
            display: flex;
            padding: 10px;
            align-items: center;
            border-bottom: 1px solid #ddd;
            .ceImg{
                width: 50px;
                height: 50px;
                background-color: aqua;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .ceText{
                line-height: 20px;
                h4{
                    width: 260px;
                    font-size: 16px;
                    font-weight: 700;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                p{
                    font-size: 12px;
                    color: #939393;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
            }
        }
        .ceFooter{
            text-align: center;
            padding: 2px 0px;
            color: #a7a7a7;
            .arright{
                line-height: 30px;
                font-size: 12px;
                margin-left: 5px;
            }
        }
    }
}
    
</style>